<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css 得注释语法 */
        /* 类样式定义=>类选择器 */
        /* .名称{
            样式名:样式值;
            ……
        } */
        .fc{
            color: gold;
            font-size: 20px;
            font-weight: bold;
            /* background-color: #999; */
        }
        .bc1{
            background-color: #999;
        }
        .bc2{
            background-color: #333;
        }
    </style>
    <link rel="stylesheet" href="./css/01.css">
</head>
<body>
    
    <!--
    css样式就是通过特定得语法修改页面效果
        css 编写得语法代码不能直接在浏览器上运行，必须通过一个载体（html）进行调用
    css语法基于页面视觉效果进行了分类
    -->
    <!-- 
    样式得三种载入方案
        1. 行内样式：直接在对应得标签上通过 style属性进行样式语法得定义
            style="样式名:样式值;样式名:样式值;……"
    -->
    <div style="color:Tomato;font-size:30px;font-weight: bold;">div标签</div>
    <!-- 
        2. 内联样式：在head标签中定义 style 标签，构建一个独立得样式定义区
            样式如何和标签进行对应 => 元素选择器 => 将样式应用于对应得标签上
    -->
    <div class="fc bc1" >内联样式 class</div>
    <div class="fc" >内联样式 class</div>
    <div class="fc bc2" >内联样式 class</div>
    <!--
        3. 外联样式：通过独立得CSS样式文件，进行css样式定义，
                    并在对应得HTML中通过link进行加载
    -->
    <br><br>
    <div class="box">加载盒子阴影</div>
</body>
</html>